<template>
  <div class="login">
    <div class="box">
      <div class="user-icon">
        <img src="../assets/logo.png" alt="">
      </div>

      <div class="form">
        <el-form ref="form" :model="form" :rules="rules">
          <el-form-item label-width="0" prop="username">
            <el-input
              placeholder="请输入用户名"
              prefix-icon="el-icon-user"
              v-model="form.username"
            ></el-input>
          </el-form-item>
          <el-form-item label-width="0" prop="password">
            <el-input
              v-model="form.password"
              placeholder="请输入密码"
              type="password"
              prefix-icon="el-icon-view"
            ></el-input>
          </el-form-item>
          <el-form-item label-width="0" class="login-reset">
            <el-button type="info" plain  @click="resetForm('form')">重置</el-button>
            <el-button type="primary" plain @click="loginForm">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: 'admin',
        password: '123456'
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    async loginForm() {
      const {data} = await this.$http({
        method: 'POST',
        url: '/login',
        data: {
          username: this.form.username,
          password: this.form.password
        }
      })

      if(data.meta.status !== 200) {
        return this.$message({
          showClose: true,
          message: data.meta.msg,
          type: 'error',
          duration: 500
        })
      }

      sessionStorage.setItem('token', data.data.token)
      this.$message({
        showClose: true,
        message: data.meta.msg,
        type: 'success',
        duration: 1000
      })
      this.$router.push('/home')
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  background-color: #084B7F;

  .box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 280px;
    background-color: #fff;

    .user-icon {
      user-select: none;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80px;
      height: 80px;
      background-color: #fff;
      border-radius: 50%;
      border: 2px solid #ccc;
      padding: 3px;
      box-shadow: 0 0 5px #ccc;
      img {
        width: 100%;
        border-radius: 50%;
      }
    }

    .form {
      margin-top: 80px;
      padding: 0 20px;

      .login-reset{
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
</style>
